<template>
  <div class="AnswerDetil">
    <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 8 }">
      <a-card class="bgcurl" :style="{backgroundImage:'url(' + bgcurl + ')'}">
        <div class="problemtitle">
          {{ title }}
        </div>
      </a-card>
    </a-skeleton>
    <div>
      <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 2 }">
        <div style="height:60px;display: flex;justify-content: space-between;align-items: center;">
          <a-button type="primary" @click="openEditor">我要回答</a-button>
          <div>
            <span>{{ user }} </span>
            <span>浏览量：{{ view_num }} </span>
            <span>提问时间：{{ q_time }}</span>
          </div>
        </div>
      </a-skeleton>
      <div v-if="editorShow">
        <editor-bar v-model="info" @change="getEditor"></editor-bar>
        <br>
        <a-button type="primary" @click="submit">提交</a-button>
      </div>
    </div>
    <a-row>
      <a-col style="margin-top:20px" v-for="item in answerList" :key="item.id">
        <a-card :style="{backgroundImage:'url(' + bgcurl + ')'}" class="bgcurl" :title="item.user+`  `+ item.time">
          <div slot="extra">
            <div>
              <a-button type="link" @click="editAnswer(item.id,idd)">编辑</a-button>
              <a-popconfirm placement="bottomRight" okText="确定" cancelText="取消" @confirm="delAnswer(item.id)">
                <template slot="title">
                  <p>是否确认删除?</p>
                </template>
                <a-button type="link">删除</a-button>
              </a-popconfirm>
            </div>
          </div>
          <div v-html="item.info"></div>
          <!-- {{ item.info }} -->
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  getKnowInfo,
  doSubmit,
  delInfo
} from '@/api/user/knowledge'
import EditorBar from '@/components/Editor/WangEditor'
export default {
  name: 'AnswerDetil',
  components: {
    EditorBar
  },
  data () {
    return {
      skeLoading: true,
      bgcurl: window.logoImg,
      info: '',
      editorShow: false,
      title: '',
      user: '00',
      view_num: '00',
      q_time: '00',
      idd: '',
      // activeShow: true,
      answerList: [
        // {
        //   id: 1,
        //   user: '王五',
        //   time: '2020-4-9',
        //   info: '0000000000000',
        //   mys: true
        // },
        // {
        //   id: 2,
        //   user: '王五',
        //   time: '2020-4-9',
        //   info: '0000000000000',
        //   mys: false
        // }
      ]
    }
  },

  computed: {

  },
  created () {
    this.idd = this.$route.query.id
    //console.log('idd', this.$route.query.id)
    //console.log('logoImg', window.logoImg)
    this.getKnowInfo(this.idd)
  },
  mounted () {

  },
  methods: {
    // getKnowInfo (val) {
    //   getKnowInfo({
    //     title_id: val
    //   }).then(res => {
    //     console.log(res)
    //     this.title = res.result.pro.q
    //     this.user = res.result.pro.q_user
    //     this.view_num = res.result.pro.view_num
    //     this.q_time = res.result.pro.q_time
    //   }).catch(err => {
    //     console.log(err)
    //   })
    // },
    getKnowInfo (val) {
      getKnowInfo({
        title_id: val
      }).then(res => {
        //console.log(res)
        this.skeLoading = false
        this.title = res.result.pro.q
        this.user = res.result.pro.q_user
        this.view_num = res.result.pro.view_num
        this.q_time = res.result.pro.q_time
        this.answerList = res.result.wer.map(function (obj) {
          var rObj = {}
          rObj.id = obj.a_id
          rObj.user = obj.a_user
          rObj.time = obj.a_time
          //console.log(obj.a_data)
          // var reg = /jpeg|jpg|png|gif/gi // 筛选图片合适 g全局 i
          var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g // 筛选出url g全局 i
          var str = obj.a_data
          var arr2 = str.match(reg) // 筛选出符合格式的数组 arr2=>["jpeg"]
          //console.log(arr2)
          for (var i = 0; i < arr2.length; i++) {
            str = str.replace(reg, arr2[i] + '-ltlogo') // 替换(表达式,替换内容)
          }
          // str = str.replace(reg, arr2 + '-ltlogo') // 替换(表达式,替换内容)
          rObj.info = str
          //console.log(str)
          if (obj.mys === 1) {
            rObj.mys = true
          } else {
            rObj.mys = false
          }
          return rObj
        })
      }).catch(err => {
        console.log(err)
      })
    },
    editAnswer (val, id) {
      //console.log(val, id)
      this.$router.push({
        // name: 'passGoods',
        path: `/admin/repository/edit-answer`,
        query: {
          id: val,
          title_id: id
        }
      })
    },
    delAnswer (id) {
      //console.log(id)
      delInfo({
        title_id: id
      }).then(res => {
        //console.log(res)
        this.$message.info('删除成功!')
        this.getKnowInfo(this.idd)
      }).catch(err => {
        console.log(err)
        this.$message.info('删除失败!')
      })
    },
    openEditor () {
      this.editorShow = !this.editorShow
    },
    // 提交
    submit () {
      doSubmit({
        title_id: this.idd,
        a: this.info
      }).then(res => {
        //console.log(res)
        this.info = ''
        this.getKnowInfo(this.idd)
        this.editorShow = !this.editorShow
        this.$message.info('提交成功!')
      }).catch(err => {
        //console.log(err)
        this.$message.info('提交失败!')
      })
    },
    // 富文本change事件
    getEditor (value) {
      //console.log(value)
      this.info = value
      //console.log(this.info)
    }
  }
}
</script>

<style lang='less' scoped>
  .AnswerDetil {
    .bgcurl {
      .problemtitle {
        font-size: 30px;
        font-weight: bold;
      }
    }
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
</style>
